<template>
  <div @wheel="handleWheel">
    <Header :mode="headerMode" ></Header>
    <router-view></router-view>
    <Bottom></Bottom>
  </div>
</template>

<script>

import Body from "@/layou/Body.vue";
import Header from "@/layou/Header.vue";
import Bottom from "@/layou/Bottom.vue";


export default {
  name: "Index",
  components: {Bottom, Header, Body},
  data() {


    return {
      headerMode:'light'
    }
  },
  methods: {
    handleWheel(e){
      const winHeight =  e.target.scrollTop || document.documentElement.scrollTop
      if(winHeight> 500){
        this.headerMode='dark'
      }else{
        this.headerMode='light'
      }

    }

  },
  mounted() {

  },

}
</script>

<style scoped lang="less">

</style>